<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <title>报表管理</title>
    <link rel="stylesheet" type="text/css" href="css/manhuaDate.1.0.css"/>
    <link rel="stylesheet" type="text/css" href="css/hotel.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/manhuaDate.1.0.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>-->
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input.mh_date").manhuaDate({
                Event: "click",//可选
                Left: 0,//弹出时间停靠的左边位置
                Top: -332,//弹出时间停靠的顶部边位置
                fuhao: "-",//日期连接符默认为-
                isTime: false,//是否开启时间值默认为false
                beginY: 1949,//年份的开始默认为1949
                endY: 2100//年份的结束默认为2049
            });
        });
    </script>
</head>
<body class="statement-body">
<input type="hidden" id="SuserName" th:value="${session.UserName}"/>
<input type="hidden" id="UserStatusid" th:value="${session.UserStatusid}"/>
<script type="text/javascript">
    var uname = $('#SuserName').val();
    if(uname == ''){
        window.location.href = "toLogin.do";
    }
    var ustatusid = $('#UserStatusid').val();
    if(ustatusid == 1){
        window.location.href = "toDecode.do";
    }
</script>
<div class="statement">
    <div class="statement-button">
        <ul>
            <li><a href="#" class="day-statement">日查询</a></li>
            <li><a href="#" class="month-statement">月查询</a></li>
            <li><a href="#" class="year-statement">年查询</a></li>
            <!--<li><p><span></span>总计:<span></span></p></li>-->
        </ul>
    </div>
</div>
<div class="statement-detail">
    <table>
        <thead>
            <tr>
                <td width="60px">编号</td>
                <td width="80px">房间号</td>
                <td width="140px">消费商品</td>
                <td width="140px">商品单价</td>
                <td width="140px">打折比例</td>
                <td width="140px">消费数量</td>
                <td width="140px">消费总金</td>
            </tr>
        </thead>
        <tbody id="statementTbody">

        </tbody>
    </table>
    <div class="statement-center">
        <ul class="pagination" id="page">

        </ul>
        共<span id="totalPage"></span>页
    </div>
</div>
<div class="day-window">
    <div class="close-window">
        日查询<a href="#" class="closebutton">X</a>
    </div>
    <div class="window-content">
        <form method="post" action="">
            <div class="statement-text">
                <ul>
                    <li><label for="data">日期:</label></li>
                </ul>
            </div>
            <div class="statement-input">
                <ul>
                    <li><input class="mh_date" type="text" readonly="true" id="data"/></li>
                </ul>
            </div>
            <div class="btnstatement">
                <button class="btn-statement" id="btnDate" type="button">确定</button>
                <button class="statement-cancel" type="button">取消</button>
            </div>
        </form>
    </div>
</div>
<div class="month-window">
    <div class="close-window">
        月查询<a href="#" class="closebutton">X</a>
    </div>
    <div class="window-content">
        <form method="post" action="">
            <div class="statement-text">
                <ul>
                    <li><label for="data2">日期:</label></li>
                </ul>
            </div>
            <div class="statement-input">
                <ul>
                    <li><input class="mh_date" type="text"  readonly="true" id="data2"/></li>
                </ul>
            </div>
            <div class="btnstatement">
                <button class="btn-statement" id="btnMonth" type="button">确定</button>
                <button class="statement-cancel" type="button">取消</button>
            </div>
        </form>
    </div>
</div>
<div class="year-window">
    <div class="close-window">
        年查询<a href="#" class="closebutton">X</a>
    </div>
    <div class="window-content">
        <form method="post" action="">
            <div class="statement-text">
                <ul>
                    <li><label for="data3">日期:</label></li>
                </ul>
            </div>
            <div class="statement-input">
                <ul>
                    <li><input class="mh_date" type="text" readonly="true" id="data3"/></li>
                </ul>
            </div>
            <div class="btnstatement">
                <button class="btn-statement" id="btnYear" type="button">确定</button>
                <button class="statement-cancel" type="button">取消</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $(".day-window").hide();
        $(".month-window").hide();
        $(".year-window").hide();
    });
    $(".day-statement").click(function () {
        $(".day-window").show();
    });
    $(".month-statement").click(function () {
        $(".month-window").show();
    });
    $(".year-statement").click(function () {
        $(".year-window").show();
    });
    $(".closebutton").click(function () {
        $(".day-window").hide();
        $(".month-window").hide();
        $(".year-window").hide();
    });
    $(".statement-cancel").click(function () {
        $(".day-window").hide();
        $(".month-window").hide();
        $(".year-window").hide();
    });
    var consumeDate;
    var consumeMonth;
    var consumeYear;
    $('#btnDate').click(function (){
        consumeDate = $('#data').val();
        $(".day-window").hide();
        consumeMonth = '';
        consumeYear = '';
        findByPage(1);
    });
    $('#btnMonth').click(function (){
        consumeMonth = $('#data2').val();
        $(".month-window").hide();
        consumeDate = '';
        consumeYear = '';
        findByPage(1);
    });
    $('#btnYear').click(function (){
        consumeYear = $('#data3').val();
        $(".year-window").hide();
        consumeDate = '';
        consumeMonth = '';
        findByPage(1);
    });
    findByPage(1);
    function findByPage(page){
        $('#statementTbody').empty();
        var currentPage = page;
        $.post(
            "statementList.do",
            {'currentPage': currentPage,'consumeDate':consumeDate,'consumeMonth':consumeMonth,'consumeYear':consumeYear},
            function (data){
                if (data.status == 0){
                    var pageBean = data.result;
                    var totalPage = pageBean.totalPage;
                    var statementList = pageBean.lists;
                    var no = pageBean.pageSize * (currentPage - 1);
                    for (var i=0;i<statementList.length;i++) {
                        $('#statementTbody').append('<tr>' +
                                '<td width="60px">'+(no+i+1)+'</td>'+
                                '<td width="80px">'+statementList[i].consumeRoomid+'</td>'+
                                '<td width="140px">'+statementList[i].consumeName+'</td>'+
                                '<td width="140px">'+statementList[i].consumePrice+'</td>'+
                                '<td width="140px">'+statementList[i].vip.vipDiscount+'</td>'+
                                '<td width="140px">'+statementList[i].consumeNumber+'</td>'+
                                '<td width="140px">'+(statementList[i].consumePrice*statementList[i].consumeNumber*statementList[i].vip.vipDisDouble)+'</td>'+
                            '</tr>');
                    }
                    $('#page').empty();
                    var begin = 1;
                    var end = 1;
                    if (totalPage <= 5) {
                        begin = 1;
                        end = totalPage;
                    } else {
                        begin = currentPage - 2;
                        end = currentPage + 2;
                        if (begin <= 1) {
                            begin = 1;
                            end = 5;
                        }
                        if (end >= totalPage) {
                            begin = totalPage - 4;
                            end = totalPage;
                        }
                    }
                    //添加上一页的按钮
                    $('#page').append('<li id="left" class="" style="display: inline-block;border: 1px solid blue;width: 20px;height: 20px"><span onclick="findByPage(' + (currentPage - 1) + ')" >&laquo;</span></li>');
                    //添加中间的页数
                    for (var i = begin; i <= end; i++) {
                        $('#page').append('<li class="" style="display: inline-block;border: 1px solid blue;width: 20px;height: 20px"><a onclick="findByPage(' + i + ')">' + i + '</a></li>');
                    }
                    //添加下一页的按钮
                    $('#page').append('<li id="right" class="" style="display: inline-block;border: 1px solid blue;width: 20px;height: 20px"><span onclick="findByPage(' + (currentPage + 1) + ')" >&raquo;</span></li>');
                    if (currentPage == 1) {
                        //添加禁用样式
                        $('#left').addClass('disabled');
                        //清除点击事件
                        $('#left>span').removeAttr('onclick');
                    }
                    if (currentPage == totalPage) {
                        //添加禁用样式
                        $('#right').addClass('disabled');
                        //清除点击事件
                        $('#right>span').removeAttr('onclick');
                    }
                    //添加当前页的激活样式
                    $('#page>li').eq(currentPage - begin + 1).addClass('selectPage');
                    //显示总页数
                    $('#totalPage').html(totalPage);
                }else {
                    layer.msg(data.message);
                }
            }
        );
    }
</script>
</body>
</html>
